<template>
	<div>
		<el-form :inline="true" :model="queryform" style="padding-top: 10px;padding-left: 5px;">
			<el-form-item label="分类" prop="goods_type" label-width="40px">
				<el-select clearable v-model="queryform.goods_type" placeholder="请选择" style="width: 120px;">
					<el-option v-for="item in goods_typedata" :key="item.goods_type" :label="item.goods_type" :value="item.goods_type"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="性别" prop="sex" label-width="40px">
				<el-select clearable v-model="queryform.sex" placeholder="请选择" style="width: 120px;">
					<el-option v-for="item in sexdata" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="季节" prop="sex" label-width="40px">
				<el-select clearable v-model="queryform.season" placeholder="请选择" style="width: 120px;">
					<el-option v-for="item in seasondata" :key="item.season" :label="item.season" :value="item.season"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="查询条件" prop="tempstring" label-width="80px">
				<el-input v-model="queryform.tempstring" style="width: 200px;" placeholder="请输入商品名称/编码/规格"></el-input>
			</el-form-item>
			<el-form-item>
				<div style="float: left;">
					<el-button type="primary" @click="querybutton">查询</el-button>
				</div>
			</el-form-item>
		</el-form>
		<!-- <v-table :chart-data=goodsData :items-data=itemsDate v-on:onEdit="showEdit" :haveEdit="false" v-on:selectionChange="handleSelectionChange"></v-table> -->
		<div>
			<el-row>
				<el-col :span="5"  :offset="1" v-for="item in goodsData " :key="item.goods_id">
				    <el-card shadow="hover"  style="width: 100%;text-align: left;font-size:15px;height:auto;position: relative" >
				      <img style="width: 100%;height:150px ;" :src="item.picture" class="image">
				      <div>
				      <span style="color: red;font-size: 18px;font-weight: bold;margin-bottom:15px;">￥{{item.price}}</span>
					   <div style="padding-top: 5px;" class="hidden_font"> <span>{{item.label}}</span></div> 
				       <div style="padding-top: 10px;"> <span>款号:{{item.goods_id}}</span></div>
					   <div style="padding-top: 5px;" class="hidden_fontone"> <span>款名称:{{item.goods_name}}</span></div>
				       <div style="height: 10px"></div>
				      </div>
				    </el-card>
				    <div style="width: 20px;height: 20px"></div>
				  </el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import { fetchList,select_goodsstock } from '../../api/goods.js'
	import vTable from '../../components/charts/table.vue'
	export default {
		data() {
			return {
				queryform:{
					goods_type:'',
					state:1,
					sex:'',
					tempstring:'',
					year:'',
					season:''
				},
				goods_typedata:[
					{'goods_type':'男上装'},
					{'goods_type':'女上装'},
					{'goods_type':'男下装'},
					{'goods_type':'女下装'},
					{'goods_type':'男套装'},
					{'goods_type':'女套装'},
					{'goods_type':'裙子'},
					{'goods_type':'连衣裙'},
					{'goods_type':'下身裙'},
				],
				sexdata:[
					{'label':'男','value':'男'},
					{'label':'女','value':'女'},
					{'label':'中性','value':'中性'},
				],
				seasondata:[
					{'season':'春季'},
					{'season':'夏季'},
					{'season':'秋季'},
					{'season':'冬季'}
				],
				
			    test:'',
				goodsData:[],
				itemsDate:[
					{prop:'goods_id',label:'商品编码'},
					{prop:'goods_name',label:'商品名称'},
					{prop:'size_name',label:'尺码'},
					{prop:'color_name',label:'颜色'},
					{prop:'goods_type',label:'商品分类'},
					{prop:'season',label:'季节'},
					{prop:'label',label:'标签'},
					{prop:'picture',label:'图片'},
					{prop:'sex',label:'性别'},
				],
				multipleTable:[],
				dialogUpdate:false,
				text:'',
				addForm:{
					goods_id:'',
					goods_name:'',
					size_name:'',
					color_name:'',
					quantity:'',
					goods_type:'',
					state:'',
					label:'',
					sex:'',
					season:'',
					year:''
				},
				addgoodsDialog:false,
				showfilelist: true,
				
			};
		},
		components:{
		    vTable
		},
		methods:{
			querybutton:function(){
				this.goodsData = [];
				select_goodsstock(this.queryform).then(response => {
					if(response.code == 0){
						this.goodsData = response.data;
						for(let i=0;i<this.goodsData.length;i++){
							this.goodsData[i].gid = i;
						}
					}
					
				})
				
			},
			showExport:function(){},
			get_goodsList() {
			
			},
			showEdit:function(index,row){
				this.dialogUpdate = true;
				this.text = '修改';
				this.addForm.goods_id = row.goods_id;
				this.addForm.goods_name = row.goods_name;
				this.addForm.size_name = row.size_name;
				this.addForm.color_name = row.color_name;
				this.addForm.quantity = row.quantity;
				this.addForm.goods_type = row.goods_type;
				this.addForm.state = row.state;
				this.addForm.label = row.label;
				this.addForm.sex = row.sex;
				// this.selectRow=row;
			},
			updateButton(){
				this.dialogUpdate = false;
			},
			handleSelectionChange(val){
				this.multipleTable = val;
			},
			
			addgoodsbutton(){
				this.addgoodsDialog = true;
			},
			
		},
		created(){
			this.querybutton();
		}
	}
</script>

<style >
	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 200px;
		margin: 0;
	  }
	  
	  .el-carousel__item:nth-child(2n) {
		background-color: #FFFFFF;
	  }
	  
	  .el-carousel__item:nth-child(2n+1) {
		background-color: #FFFFFF;
	  }
	  .hidden_font {
	  	overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;  
		-webkit-box-orient: vertical;
	  	}
		.hidden_fontone {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;  
			-webkit-box-orient: vertical;
			}
</style>
